<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优质用户行为分析仪表盘</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/css">
        body {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: 100vh;
        }
        
        .chart-container {
            transition: all 0.3s ease;
            height: 380px;
        }
        
        .card-hover {
            transition: all 0.3s ease;
            border-radius: 12px;
            background: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }
        
        .stat-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        }
        
        .header-gradient {
            background: linear-gradient(120deg, #1d4ed8 0%, #2563eb 100%);
        }
        
        .chart-title {
            border-left: 4px solid #165DFF;
            padding-left: 12px;
            margin-bottom: 15px;
        }
        
        .tab-button {
            padding: 10px 20px;
            border-radius: 8px;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .tab-button.active {
            background: #165DFF;
            color: white;
        }
        
        .user-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .bubble {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }
        
        @media (max-width: 1024px) {
            .grid-layout {
                grid-template-columns: 1fr;
            }
        }
        /* 新增表格样式 */
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .data-table th {
            background-color: #f0f7ff;
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: #165DFF;
        }
        
        .data-table td {
            padding: 12px 16px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .data-table tr:hover {
            background-color: #f8fbff;
        }
        
        .table-container {
            max-height: 420px;
            overflow-y: auto;
        }
        
        .highlight-row {
            background-color: #f0f7ff !important;
            font-weight: 500;
        }
    </style>
</head>

<body class="font-inter text-dark">
    <!-- 页面头部 -->
    <header class="bg-[#fefefe] text-black shadow-lg">
        <div class="container mx-auto px-4 py-6">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold flex items-center">
                <img src="1.png" alt="Custom Image" class="mr-3 h-12 w-12">优质用户行为分析仪表盘
            </h1>
            <p class="text-gray-600 mt-2 max-w-3xl">基于优质用户数据的深度洞察</p>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 用户摘要卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-1 gap-6 mb-10">
            <!-- 最优质用户卡片 -->
            <div class="card-hover p-6">
                <h3 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fa fa-trophy text-warning mr-2"></i>最优质用户
                </h3>
                <div class="border-l-4 border-primary pl-4 py-2 mb-4">
                    <p class="font-medium">用户ID: 76626935</p>
                    <p class="text-sm text-gray-600">购买欲望: 18.18% (最高)</p>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-blue-50 p-3 rounded-lg">
                        <p class="text-sm text-gray-600">总浏览数</p>
                        <p class="text-xl font-bold text-primary">11 次</p>
                    </div>
                    <div class="bg-green-50 p-3 rounded-lg">
                        <p class="text-sm text-gray-600">购买数</p>
                        <p class="text-xl font-bold text-success">2 次</p>
                    </div>
                </div>
            </div>



            <!-- 优质用户分析部分 -->
            <div class="mb-12">
                <div class="flex items-center mb-6">
                    <h2 class="text-2xl font-bold text-gray-800 mr-4">优质用户行为分析</h2>
                    <span class="user-badge bg-blue-100 text-blue-800">高转化率用户</span>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <!-- 散点图卡片 -->
                    <div class="card-hover">
                        <div class="p-5">
                            <h3 class="text-xl font-semibold chart-title">
                                <i class="fa fa-dot-circle-o text-primary mr-2"></i>用户行为分布散点图
                            </h3>
                            <div class="chart-container" id="qualityScatterChart"></div>
                        </div>
                    </div>

                    <!-- 折线图卡片 -->
                    <div class="card-hover">
                        <div class="p-5">
                            <h3 class="text-xl font-semibold chart-title">
                                <i class="fa fa-line-chart text-success mr-2"></i>购买趋势折线图
                            </h3>
                            <div class="chart-container" id="qualityLineChart"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 优质用户数据表格部分 -->
            <div class="mb-12">
                <div class="flex items-center mb-6">
                    <h2 class="text-2xl font-bold text-gray-800 mr-4">优质用户数据详情</h2>
                    <span class="user-badge bg-purple-100 text-purple-800">原始数据集</span>
                </div>

                <div class="card-hover p-5">
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>用户ID</th>
                                    <th>总浏览数</th>
                                    <th>购买数</th>
                                    <th>购买欲望</th>
                                </tr>
                            </thead>
                            <tbody id="qualityUserTable">
                                <!-- 表格数据将通过JS填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white mt-12 py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h2 class="text-xl font-semibold">用户购买欲分析可视化</h2>
                    <p class="text-gray-400 mt-1"></p>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-500 text-sm">
                &copy; 小组成员 李泽霖 朱志斌 宋云昊 王时琛 邱俊岚 李继拓 杨一博
            </div>
        </div>
    </footer>

    <script>
        // 优质用户数据
        const qualityUserData = [{
            user_id: '76626935',
            total_browse_count: 11,
            items_with_other_behavior: 2,
            purchase_desire: 0.1818
        }, {
            user_id: '73577977',
            total_browse_count: 7,
            items_with_other_behavior: 1,
            purchase_desire: 0.1429
        }, {
            user_id: '125186578',
            total_browse_count: 7,
            items_with_other_behavior: 1,
            purchase_desire: 0.1429
        }, {
            user_id: '117517120',
            total_browse_count: 7,
            items_with_other_behavior: 1,
            purchase_desire: 0.1429
        }, {
            user_id: '76608645',
            total_browse_count: 7,
            items_with_other_behavior: 1,
            purchase_desire: 0.1429
        }, {
            user_id: '124941936',
            total_browse_count: 7,
            items_with_other_behavior: 1,
            purchase_desire: 0.1429
        }, {
            user_id: '139275985',
            total_browse_count: 18,
            items_with_other_behavior: 2,
            purchase_desire: 0.1111
        }, {
            user_id: '17387185',
            total_browse_count: 9,
            items_with_other_behavior: 1,
            purchase_desire: 0.1111
        }, {
            user_id: '84208789',
            total_browse_count: 28,
            items_with_other_behavior: 3,
            purchase_desire: 0.1071
        }, {
            user_id: '95448497',
            total_browse_count: 21,
            items_with_other_behavior: 2,
            purchase_desire: 0.0952
        }, {
            user_id: '30463766',
            total_browse_count: 11,
            items_with_other_behavior: 1,
            purchase_desire: 0.0909
        }, {
            user_id: '69486826',
            total_browse_count: 11,
            items_with_other_behavior: 1,
            purchase_desire: 0.0909
        }, {
            user_id: '132297842',
            total_browse_count: 11,
            items_with_other_behavior: 1,
            purchase_desire: 0.0909
        }, {
            user_id: '87980818',
            total_browse_count: 11,
            items_with_other_behavior: 1,
            purchase_desire: 0.0909
        }, {
            user_id: '123542262',
            total_browse_count: 12,
            items_with_other_behavior: 1,
            purchase_desire: 0.0833
        }];

        // 初始化所有图表和表格
        document.addEventListener('DOMContentLoaded', function() {
            // 优质用户散点图
            const scatterChart = echarts.init(document.getElementById('qualityScatterChart'));
            const scatterOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return `用户ID: ${params.name}<br/>
                                浏览数: ${params.value[0]}<br/>
                                购买数: ${params.value[1]}<br/>
                                购买欲望: ${(params.data.purchaseDesire * 100).toFixed(2)}%`;
                    }
                },
                grid: {
                    left: '3%',
                    right: '7%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: '总浏览数',
                    nameLocation: 'middle',
                    nameGap: 30,
                    axisLabel: {
                        formatter: '{value} 次'
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '总购买数',
                    nameLocation: 'end',
                    nameGap: 10,
                    axisLabel: {
                        formatter: '{value} 次'
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    name: '用户行为',
                    type: 'scatter',
                    data: qualityUserData.map(user => ({
                        value: [user.total_browse_count, user.items_with_other_behavior],
                        name: user.user_id,
                        symbolSize: user.purchase_desire * 80 + 10,
                        purchaseDesire: user.purchase_desire
                    })),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    itemStyle: {
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(22, 93, 255)'
                        }, {
                            offset: 1,
                            color: 'rgb(54, 203, 203)'
                        }])
                    }
                }]
            };
            scatterChart.setOption(scatterOption);

            // 优质用户折线图（购买欲望排名）
            const lineChart = echarts.init(document.getElementById('qualityLineChart'));
            const sortedByDesire = [...qualityUserData].sort((a, b) => b.purchase_desire - a.purchase_desire);
            const desireValues = sortedByDesire.map(user => user.purchase_desire);
            const userIds = sortedByDesire.map(user => user.user_id);

            const lineOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        return `用户ID: ${userIds[params.dataIndex]}<br/>购买欲望: ${(params.value * 100).toFixed(2)}%`;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: desireValues.map((_, index) => index + 1), // 显示排名1到15
                    name: '购买欲望排名',
                    nameLocation: 'middle',
                    nameGap: 30
                },
                yAxis: {
                    type: 'value',
                    name: '购买欲望',
                    axisLabel: {
                        formatter: function(value) {
                            return (value * 100).toFixed(1) + '%';
                        }
                    }
                },
                series: [{
                    name: '购买欲望',
                    type: 'line',
                    data: desireValues,
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                        width: 3,
                        color: '#36CBCB'
                    },
                    itemStyle: {
                        color: '#36CBCB'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(54, 203, 203, 0.5)'
                        }, {
                            offset: 1,
                            color: 'rgba(54, 203, 203, 0.1)'
                        }])
                    },
                    markPoint: {
                        data: [{
                            type: 'max',
                            name: '最高'
                        }, {
                            type: 'min',
                            name: '最低'
                        }],
                        symbolSize: 50,
                        label: {
                            formatter: function(param) {
                                return param.name;
                            }
                        }
                    }
                }]
            };
            lineChart.setOption(lineOption);

            // 填充优质用户数据表格
            const tableBody = document.getElementById('qualityUserTable');

            qualityUserData.forEach((user, index) => {
                const row = document.createElement('tr');
                if (user.user_id === '76626935' || user.user_id === '84208789') {
                    row.className = 'highlight-row';
                }

                row.innerHTML = `
                    <td>${user.user_id}</td>
                    <td>${user.total_browse_count}</td>
                    <td>${user.items_with_other_behavior}</td>
                    <td>${(user.purchase_desire * 100).toFixed(2)}%</td>
                `;
                tableBody.appendChild(row);
            });

            // 响应窗口大小变化
            window.addEventListener('resize', function() {
                scatterChart.resize();
                lineChart.resize();
            });
        });
    </script>
</body>

</html>